<template>
  <div class="search-bar-container">
    <div class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="搜索..." class="search-input">
      <button @click="showOptions = !showOptions">筛选</button>
      <button @click="startFiltering">开始筛选</button>
      <!-- 分类选项的下拉框 -->
      <ul v-show="showOptions" class="filter-options">
        <li v-for="(options, category) in filterOptions" :key="category">
          <div class="category-title">{{ category }}</div>
          <ul>
            <li v-for="option in options" :key="option">
              <label>
                <input type="checkbox" :value="option" v-model="selectedOptions[option]">
                {{ option }}
              </label>
            </li>
          </ul>
        </li>
      </ul>

      <!-- 选中的分类选项展示 -->
      <div v-if="Object.keys(selectedOptions).length" class="selected-options">
        <p>已选分类选项：</p>
        <ul>
          <li v-for="(options, category) in getSelectedOptions" :key="category">
            {{ category }}
            <span @click="removeOption(category)" class="remove-icon">×</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 页面其他内容 -->
  </div>
</template>

<script>
import axios from 'axios';
import Image from './image';

export default {
  data() {
    return {
      searchQuery: '',            // 搜索关键词
      showOptions: false,         // 控制分类选项的显示与隐藏
      filterOptions: {
        颜色: ['红色', '绿色', '蓝色'],
        主题: ['明亮', '黑暗'],
        风格: ['风景', '二次元','科幻']
      },
      selectedOptions: {}, // 存储选中的分类选项
      selectedImage:[]
    };
  },
  computed: {
    getSelectedOptions() {
      const filteredOptions = {};
      for (const key in this.selectedOptions) {
        if (key !== '__ob__') {
          filteredOptions[key] = this.selectedOptions[key];
        }
      }
      return filteredOptions;
    }
  },
  methods: {
    changetagtochina(originname){
        if(originname == 'scene'){
          return '风景'
        }
        else if(originname == 'erciyuan'){
          return '二次元'
        }
        else if(originname == 'technology'){
          return '科幻'
        }
        else{
          return '其它'
        }
      },
    removeOption(category) {
      console.log(this.selectedOptions[category]);
      this.$delete(this.selectedOptions, category);
      this.selectedImage.splice(0);
    },
    startFiltering() {
      // 根据选中的选项和搜索关键词执行筛选逻辑
      console.log(this.selectedOptions);
      console.log(this.searchQuery);
      const filteredImages = this.filterImages(this.selectedOptions, this.searchQuery);

      // 处理筛选后的图片逻辑，比如更新页面显示等
      // ...
      console.log(filteredImages);
      this.$emit('filteringCompleted', filteredImages);
    },

    async filterImages(options, searchQuery) {
      // 执行筛选逻辑，根据选项和搜索关键词返回筛选后的图片列表
      // ...
      // const url = 'https://localhost:7293/api/Wallpapers/cat/';
      // if(options)
      const url = 'https://localhost:7293/api/Wallpapers/cat/';
      const optionkeys = Object.keys(options);
      const selectedoptions = optionkeys[0];
      if(optionkeys.includes('风景'))
      {
        console.log('哈哈哈哈哈哈哈这是风景图')
        try {
          const response = await axios.get('https://localhost:7293/api/Wallpapers/cat/scene/seq=0');
          const imagedata = response.data;
          
          imagedata.forEach((imageData,index) => {
            const image = new Image(index+1,imageData.wUrl,this.changetagtochina(imageData.wCate),false);
            this.selectedImage.push(image)
          });
          console.log(response);
          return this.selectedImage;
          } catch (error) {
            console.error(error);
          }
      }
      else if(optionkeys.includes('二次元')){
        console.log('哈哈哈哈哈哈哈这是二次元图')
        try {
          const response = await axios.get('https://localhost:7293/api/Wallpapers/cat/erciyuan/seq=0');
          const imagedata = response.data;
          
          imagedata.forEach((imageData,index) => {
            const image = new Image(index+1,imageData.wUrl,this.changetagtochina(imageData.wCate),false);
           
            this.selectedImage.push(image)
          });
          console.log(response);
          return this.selectedImage;
          } catch (error) {
            console.error(error);
          }
      }
      else if(optionkeys.includes('科幻')){
        console.log('哈哈哈哈哈哈哈这是科幻图')
        try {
          const response = await axios.get('https://localhost:7293/api/Wallpapers/cat/technology/seq=0');
          const imagedata = response.data;
          
          imagedata.forEach((imageData,index) => {
            const image = new Image(index+1,imageData.wUrl,this.changetagtochina(imageData.wCate),false);
            
            this.selectedImage.push(image)
          });
          console.log(response);
          return this.selectedImage;
          } catch (error) {
            console.error(error);
          }
      }
      else{
        console.log('哈哈哈哈哈哈哈这是其它图')
        try {
          const response = await axios.get('https://localhost:7293/api/Wallpapers/cat/else/seq=0');
          const imagedata = response.data;
          
          imagedata.forEach((imageData,index) => {
            const image = new Image(index+1,imageData.wUrl,this.changetagtochina(imageData.wCate),false);
            
            this.selectedImage.push(image)
          });
          console.log(response);
          return this.selectedImage;
          } catch (error) {
            console.error(error);
          }
      }
      
      // console.log(optionkeys);
      // console.log(selectedoptions);
      

    }
  }
};
</script>

<style scoped>
/* 样式定义 */
.search-bar-container {
  position: relative;
  z-index: 1;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
  z-index: 2;
}

.filter-options {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
  z-index: 1;
}

.category-title {
  font-weight: bold;
  margin-bottom: 5px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 5px;
}

.selected-options {
  margin-top: 20px;
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: 2;
}

.selected-options p {
  font-weight: bold;
  margin-bottom: 5px;
}

.selected-options ul li {
  display: inline-block;
  margin-right: 10px;
  background-color: #f2f2f2;
  padding: 5px;
  border-radius: 5px;
}

.selected-options .remove-icon {
  cursor: pointer;
  color: red;
  margin-left: 5px;
}

.selected-options .remove-icon:hover {
  font-weight: bold;
}
</style>
